<template>
  <el-dialog
    width="80%"
    :visible.sync="dialog"
    :close-on-click-modal="false"
    @close="closeDialog"
  >
    <template #title> {{ year }} 年审计计划管理【 项目补录 】 </template>
    <el-form
      :model="form"
      ref="supplement-form"
      :rules="rules"
      label-width="130px"
      :inline="false"
      size="normal"
    >
      <div class="d-model">
        <div class="d-row">
          <el-form-item label="项目名称" prop="project_name">
            <el-input
              style="width: 500px"
              v-model="form.project_name"
              placeholder=""
            ></el-input>
          </el-form-item>
          <el-form-item label="建设单位" prop="owner_id">
            <DeptCascader
              :options="dept"
              :defaultChecked.sync="form.owner_id"
              @change="changeDept"
            ></DeptCascader>
          </el-form-item>
          <el-form-item label="建设地址" prop="project_address">
            <el-input
              style="width: 500px"
              v-model="form.project_address"
            ></el-input>
          </el-form-item>

          <el-form-item label="总投资额 " prop="investment">
            <el-input-number
              v-model="form.investment"
              label=""
              :step="1"
              :controls="true"
              controls-position="right"
            >
            </el-input-number>
            <span>（ 万元 ）</span>
          </el-form-item>
        </div>
        <div class="d-row">
          <el-form-item
            class="d-textarea"
            label-position="top"
            label="建设规模及内容"
            prop="project_content"
          >
            <el-input
              type="textarea"
              v-model="form.project_content"
              :autosize="{
                minRows: 3,
                maxRows: 6,
              }"
            ></el-input>
          </el-form-item>
        </div>
        <div class="d-row">
          <el-form-item
            label-width="300px"
            label="开工日期"
            prop="fact_start_date"
          >
            <el-date-picker
              v-model="form.fact_start_date"
              type="date"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label-width="300px"
            label="竣工日期"
            prop="fact_end_date"
          >
            <el-date-picker
              v-model="form.fact_end_date"
              type="date"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </div>
        <div class="d-row">
          <el-form-item
            label-width="300px"
            label="规定审计征求意见报告完成日期"
            prop="plan_finish_date"
          >
            <el-date-picker
              v-model="form.plan_finish_date"
              type="date"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label-width="300px"
            label="规定审计报告完成日期"
            prop="plan_audit_date"
          >
            <el-date-picker
              v-model="form.plan_audit_date"
              type="date"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </div>
        <el-form-item label="">
          <el-button type="info" @click="closeDialog">取消</el-button>
          <el-button
            type="warning"
            icon="el-icon-s-promotion"
            @click="supplementProject('上级交办')"
            >纳入上级交办审计计划</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-s-claim"
            @click="supplementProject('年度计划')"
            >纳入年度审计计划</el-button
          >
        </el-form-item>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
import DeptCascader from "@/components/Common/DeptCascader.vue";
import { required } from "@/utils/eValidate";
import { getDeptTree } from "@/api/System/Department";
import { postAuditProjectAdd } from "@/api/Audit/Index";
export default {
  components: { DeptCascader },
  props: {
    year: {
      type: String,
      default: "",
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      form: {
        project_name: "",
        owner_id: "",
        owner_name: "",
        project_address: "",
        investment: undefined,
        project_content: "",
        fact_start_date: "",
        fact_end_date: "",
        plan_finish_date: "",
        plan_audit_date: "",
      },
      rules: {
        project_name: [required],
        owner_id: [required],
        project_address: [required],
        investment: [required],
        project_content: [required],
        fact_start_date: [required],
        fact_end_date: [required],
        plan_finish_date: [required],
        plan_audit_date: [required],
      },
      dept: [],
    };
  },
  methods: {
    closeDialog() {
      this.$emit("update:visible", false);
    },
    supplementProject(type) {
      this.$refs["supplement-form"].validate((valid) => {
        if (valid) {
          this.form.cur_year = this.year;
          this.form.enroll_way = type;
          postAuditProjectAdd(this.form).then((res) => {
            if (res.code == 0) {
              this.$refs["supplement-form"].resetFields();
              this.$message.success("项目补录成功，列入审计计划成功");
              this.closeDialog();
              this.$emit("refresh");
            }
          });
        }
      });
    },
    changeDept(val) {
      this.form.owner_id = val.value;
      this.form.owner_name = val.label;
    },
    initDept() {
      getDeptTree().then((res) => {
        if (res.code == 0) {
          this.dept = res.data;
        }
      });
    },
  },
  created() {
    this.initDept();
  },
  computed: {
    dialog: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", false);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.d-model {
  margin-bottom: 10px;
  font-weight: 600;
  background-color: #f2f6fc;
  box-sizing: border-box;
  padding: 10px;
}
.d-row {
  margin: 20px 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: 1px solid #000;
  :deep(.el-form-item) {
    margin-bottom: 20px;
  }
}
.d-row-child {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.d-textarea {
  width: 100%;
  margin: 0 auto;
}
</style>